<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0">
	<script type="text/javascript" src="hammer.js"></script>
	<style type="text/css">
		*{margin: 0;padding: 0;list-style: none;text-decoration: none}
		.box{width: 200px;height: 200px;background: #ccc;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	<script type="text/javascript">
		function $(...arg){
			return document.querySelectorAll(...arg);
		}
		window.onload=function(){
			let obox=$('.box')[0];
			let hammer=new Hammer(obox,{});
			hammer.get('rotate').set({ enable: true });
			hammer.on('rotatestart',ev=>{
			})
			hammer.on('rotatemove',ev=>{
				obox.innerHTML=ev.angle+'<br>'+ev.rotation+'<br>'+ev.scale+'<br>'+ev.distance+'<br>'+ev.deltaX+'<br>'+ev.deltaY+'<br>';
				obox.style.transform=`rotate(${ev.rotation}deg)`;
			});
			hammer.on('rotateend',ev=>{
			});
			hammer.on('rotatecancel',ev=>{
			});
		};
	</script>
</body>
</html>